<!DOCTYPE html>
<html lang="en"
      xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div th:replace="common/common::html"></div>

<head>
    <meta charset="UTF-8">
    <title th:text="#{app.name}">企业云盘项目</title>
    <script th:inline="javascript">
        $(function () {
            $("#gd-user-btn-id").click(function (event) {
                event.stopPropagation()
                $("#gd-user-info-id > ul").removeClass("hidden")
            })

            $("body").click(function () {
                $("#gd-user-info-id > ul").addClass("hidden")
            })

            $("ul#gd-sys-menu-id > li.sys-menu-li ").click(function () {
                $("ul#gd-sys-menu-id > li.sys-menu-li").removeClass('active')
                $(this).addClass('active')
                $(".service-menu").removeClass('in')
                var forid = $(this).attr("forid")
                $("#" + forid).addClass("in")
            })

            $("ul#gd-sys-menu-id > li:first").click()

            $("ul.menu-level3 > li").click(function () {
                $("ul.menu-level3 > li").removeClass("focus")
                $(this).addClass("focus")
            })


            // 初始化用户信息修改弹框
            $("#modify-current-user-dialog-id").dialog({
                autoOpen: false,
                width: 400,
                modal: true,
                resizable: false,
                title: /*[[#{main.user.modify.dialog.title}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function () {
                            var flag = $("form#modify-current-user-form-id input.form-control").checkDom()
                            if (!flag) {
                                return
                            }
                            $("#modify-current-user-form-id").submit()
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            })
            // 用户信息修改表单提交
            $("#modify-current-user-form-id").ajaxForm({
                dataType: "json",
                success: function (data) {
                    message(data.msg);
                    if (data.success) {
                        $("#modify-current-user-dialog-id").dialog('close')
                        // 更新页面显示的用户名
                        location.reload();
                    }
                },
                error: function () {
                    message(/*[[#{common.error}]]*/'');
                }
            })

            //缩放按钮功能
            let isMinified = false;
            $("#toggle-view-btn").click(function() {
                isMinified = !isMinified;
                // 切换logo显示状态
                $("header > img").toggle(!isMinified);
                // 切换语言选择显示状态
                $("header > nav:first-of-type").toggle(!isMinified);
                // 更改按钮图标
                const icon = $(this).find("i");
                if (isMinified) {
                    icon.removeClass("glyphicon-compress").addClass("glyphicon-expand");
                } else {
                    icon.removeClass("glyphicon-expand").addClass("glyphicon-compress");

                }
            })

            // 初始化密码修改弹框
            $("#modify-current-password-dialog-id").dialog({
                autoOpen: false,
                width: 400,
                modal: true,
                resizable: false,
                title: /*[[#{main.passwd.modify.dialog.title}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function () {
                            var flag = $("form#modify-current-password-form-id input.form-control").checkDom()
                            if (!flag) {
                                return
                            }

                            // 验证新密码和确认密码是否一致
                            var newPassword = $("input[name='newPassword']").val();
                            var confirmPassword = $("input[name='confirmPassword']").val();
                            if (newPassword !== confirmPassword) {
                                message(/*[[#{password.confirm.not.match}]]*/'');
                                return;
                            }

                            $("#modify-current-password-form-id").submit()
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            })

            // 密码修改表单提交
            $("#modify-current-password-form-id").ajaxForm({
                dataType: "json",
                success: function (data) {
                    message(data.msg);
                    if (data.success) {
                        $("#modify-current-password-dialog-id").dialog('close')
                        // 清空表单
                        $("#modify-current-password-form-id")[0].reset();
                    }
                },
                error: function () {
                    message(/*[[#{common.error}]]*/'');
                }
            })

        })//ready function
        // 修改当前用户信息
        function modifyCurrentUserInfo() {
            $.ajax({
                type: 'post',
                async: false,
                dataType: 'json',
                url: /*[[@{/getCurrentUserInfo}]]*/'',
                success: function (data) {
                    // 填充表单数据
                    var list = $("form#modify-current-user-form-id input.form-control");
                    list.each(function (index, item) {
                        var name = $(item).attr("name")
                        $(this).val(data[name])
                    })
                    $("form#modify-current-user-form-id input.form-control").checkDom()

                    $("#modify-current-user-dialog-id").dialog('open')
                },
                error: function (msg) {
                    message(/*[[#{common.error}]]*/'');
                }
            });
        }

        // 修改当前用户密码
        function modifyCurrentUserPassword() {
            // 清空表单
            $("#modify-current-password-form-id")[0].reset();
            $("form#modify-current-password-form-id input.form-control").checkDom()

            $("#modify-current-password-dialog-id").dialog('open')
        }


    </script>
    <style>

        body {
            display: flex;
            flex-direction: column;
        }

        body > header {
            display: flex;
            width: 100%;
            justify-content: space-between;
            padding: 10px;
            align-items: center;
            height: 100px;
        }

        body > header > img {
            height: 80px;
        }

        body > header > nav {
            width: 150px;
            display: flex;
            justify-content: space-between;
            padding-right: 20px;
        }

        body > section {
            width: 100%;
            flex-grow: 1;
            display: flex;
        }

        body > section > nav {
            flex-basis: 130px;
            height: 100%;
            border-right: 1px solid #ddd;
            margin-top: 20px;
        }

        body > section > iframe {
            flex-grow: 1;
            height: 100%;
            border-width: 0;
        }

        #gd-user-info-id {
            position: absolute;
            top: 33px;
            right: 90px;
            width: 160px;
            display: flex;
            flex-direction: column;
            align-items: start;
        }

        menu-level3 > li {
            margin-left: 13px;
        }

        .fade {
            display: none;
        }

        .fade.in {
            display: block;
        }

        ul.menu-level3 > li.focus {
            background-color: #dfd;



        }



        /* 缩放按钮样式 */
        /*#toggle-view-btn {*/
        /*    margin-left: 10px;*/
        /*    cursor: pointer;*/
        /*}*/


    </style>
</head>
<body>

<header>

    <img th:if="${session.lang} eq 'en'" th:src="@{/assets/images/logo_en.png}">
    <img th:unless="${session.lang} eq 'en'" th:src="@{/assets/images/logo_zh.png}">

    <nav>
        <a th:href="@{/(lang=en)}" th:text="#{login.english}"></a>
        <a th:href="@{/(lang=zh)}" th:text="#{login.chinese}"></a>
    </nav>

    <nav></nav>

    <nav id="gd-user-info-id">
        <a id='gd-user-btn-id' href="#" class="btn">
            <i class="glyphicon glyphicon-user"></i>
            <span th:unless="${session.lang} eq 'en'" sec:authentication="principal.niceName"></span>
            <span th:if="${session.lang} eq 'en'" sec:authentication="principal.username"></span>
        </a>

        <ul class="nav navbar-btn hidden">
            <li>

                <a href="#" onclick="modifyCurrentUserInfo()">

                    <i class="glyphicon glyphicon-king"></i>
                    <span th:text="#{main.user.modify}"></span>
                </a>
            </li>

            <li>
                <a href="#" onclick="modifyCurrentUserPassword()">
                    <i class="glyphicon glyphicon-phone"></i>
                    <span th:text="#{main.passwd.modify}"></span>
                </a>
            </li>
            <li>
                <a th:href="@{/logout}">
                    <i class="glyphicon glyphicon-off"></i>
                    <span th:text="#{main.user.logout}"></span>
                </a>
            </li>
        </ul>
    </nav>
</header>
<ul id="gd-sys-menu-id" class="nav nav-tabs">
    <li class="sys-menu-li" th:each="item:${session.menuList}" th:forid="${'service-menu-' + item.menuId}">
        <a href="#">
            <i th:class="${item.menuIcon}"></i>
            <span th:text="${item.menuName}"></span>
        </a>
    </li>
    <li>
        <a id="toggle-view-btn" href="#" >
            <i class="glyphicon glyphicon-download"></i>
        </a>
    </li>
</ul>

<section>
    <nav>
        <ul class="service-menu nav navbar-btn tab-pane fade" th:each="menu1 :${session.menuList}"
            th:id="${'service-menu-' + menu1.menuId}">
            <li th:each="menu2:${menu1.child}">
                <a href="#">
                    <i th:class="${menu2.menuIcon}"></i>
                    <span th:text="${menu2.menuName}"></span>
                </a>
                <ul class="nav navbar-btn menu-level3">
                    <li th:each="menu3:${menu2.child}">
                        <a th:href="${menu3.getMenuUrl()}" target="contents">
                            <i th:class="${menu3.menuIcon}"></i>
                            <span th:text="${menu3.menuName}"></span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>

    </nav>
    <iframe name="contents" th:src="@{/welcomePage}"></iframe>
</section>


        <div id="modify-current-user-dialog-id" style="display: none;">
            <form id="modify-current-user-form-id" method="post" th:action="@{/modifyCurrentUserInfo}">
                <div class="form-group">
                    <span th:text="#{user.uuid}"></span>
                    <input class="form-control" name="userUuid" readonly>
                </div>

                <div class="form-group">
                    <span th:text="#{user.name}"></span>
                    <input class="form-control" name="userName" pattern="^[a-z,A-Z,0-9]{4,}$">
                </div>

                <div class="form-group">
                    <span th:text="#{user.nice.name}"></span>
                    <input class="form-control" name="niceName" pattern="^.+$">
                </div>

                <div class="form-group">
                    <span th:text="#{user.email}"></span>
                    <input class="form-control" name="email" type="email"
                           pattern="^[A-Za-z0-9]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$">
                </div>

                <div class="form-group">
                    <span th:text="#{user.mobile}"></span>
                    <input class="form-control" name="mobile" type="number" pattern="^[0-9]{11}$">
                </div>
            </form>
        </div>


<!-- 密码修改弹框 -->
<div id="modify-current-password-dialog-id" style="display: none;">
    <form id="modify-current-password-form-id" method="post" th:action="@{/modifyCurrentUserPassword}">
        <div class="form-group">
            <span th:text="#{password.old}"></span>
            <input class="form-control" name="oldPassword" type="password" pattern="^.{6,}$">
        </div>

        <div class="form-group">
            <span th:text="#{password.new}"></span>
            <input class="form-control" name="newPassword" type="password" pattern="^.{6,}$">
        </div>

        <div class="form-group">
            <span th:text="#{password.confirm}"></span>
            <input class="form-control" name="confirmPassword" type="password" pattern="^.{6,}$">
        </div>
    </form>
</div>

</body>
</html>